/****************************
 *Layer1.2    作者：kevin
 *
***************************/
;+(function(win,$){
	"use strict";
	var index=0,tap='createTouch' in document?'tap':'click',version='2.0.0';
	var layRouter={};
	
	//层进入动画：[CSS默认值，进入，关闭，动画时间]
	var fxArr={
		left:[{'-webkit-transform':'translateX(-100%)'},{translateX:'0'},{translateX:'-100%'},200],
		right:[{'-webkit-transform':'translateX(100%)'},{translateX:'0'},{translateX:'100%'},200],
		top:[{'-webkit-transform':'translateY(-100%)'},{translateY:'0'},{translateY:'-100%'},300],
		bottom:[{'-webkit-transform':'translatey(100%)'},{translateY:'0'},{translateY:'100%'},300],
		zoom:[{'-webkit-transform':'scale(.1)',opacity:.1},{scale:1,opacity:1},{scale:.1,opacity:.1},250],
		fade:[{opacity:0,'-webkit-transform':'scale(1.1)'},{opacity:1,scale:1},{opacity:0,scale:1.1},100],
	};
	$.layerInit={
		router:false,	//全局默认开启路由
		anim:'fade',	//全局默认入场动画fade
		shade:true,		//全局默认开启遮罩
		fx:{}			//添加入场动画
	}
	//合并新增入场动画
	fxArr=$.extend(fxArr,$.layerInit.fx);
	//cssToJson
	var _cssToJson=function(css){
		if(!css)return {};
		var json={},icss=css.split(';')||[];
		$.each(icss,function(i,itm){
			var arr=itm.split(':');
			json[arr[0]]=arr[1];
		})
		return json;
	}
	/*$.layer为核心类，返回当层元素对象，option:参数如下
	 *id		层ID，唯一性标识。
	 *type		层类型，默认类型：[0]页面层，[1]alert层，[2]
	 *head		标题区，字符串或{title:'标题',style:'头部样式',btn:[{text:'按扭名',icon:'按扭图标及样式',isclose:是否关闭按扭}]}
	 *content	内容区，字符串，或['内容','CSS样式']
	 *foot		底部区，字符串，或['内容','CSS样式']
	 *className	样式名
	 *size		尺寸['宽','高']
	 *style		自定义样式
	 *anim		动画名称，或对象[{初始CSS},{入场动画},{出场动画},time]
	 *shade		是否显示遮罩，1或{css}
	 *shadeclose	点击遮罩关闭
	 *timeout	定时关闭，秒
	 *router	是否路由(当文档中出现.route-block样式时，阻止返回事件)
	 *方法：
	 *onshow		显示完成后触发
	 *onclose		关闭后触发
	 *事件
	 *show		显示后出发
	 *close		关闭后触发
	*/
	$.layer=function(option){
		index++;
		var _init=$.layerInit,defaults={
			id:'layer-'+index,
			type:'0',
			head:'',
			content:'',
			foot:'',
			className:'',
			style:{},
			size:[],
			timeout:'',
			router:_init.router,	//默认全局变量
			anim:_init.anim,		//默认全局变量
			shade:_init.shade,		//默认全局变量
			shadeclose:true,
			//方法
			onshow:new Function,
			onclose:new Function
		}
		//合并用户参数
		var opt=$.extend(defaults,option);
		//检测是否已存在
		if($('#'+opt.id).size()){return false;}
		//添加自定义出场效果
		var anim=opt.anim,fx;
		if($.isArray(anim)){
			fx=anim;
			anim='user-fx'+index;
			fxArr[anim]=fx;
		}else{
			fx=fxArr[anim];
		}
		/*格式化头部*/
		var head=opt.head||'',hdstyle;
		if(typeof(opt.head)=='object'){
			head=$.map(($.isArray(opt.head.btn)?opt.head.btn:[]),function(itm,i){return '<a class="kui-laytit-btn'+(itm.isclose!=(0||false)?' kui-layer-close':'')+' '+(itm.icon||'')+'">'+(itm.text||'')+'</a>'}).join('')||'';
			head+=opt.head.title?'<h1 class="kui-layer-title">'+opt.head.title+'</h1>':'';
			hdstyle=typeof(opt.head.style)=='object'?opt.head.style:_cssToJson(opt.head.style);
		}
		var $head=head?$('<div class="kui-layer-head">'+head+'</div>').css(hdstyle):'';
		
		//内容区
		var content=opt.content||'',constyle={};
		if($.isArray(content)){
			constyle=typeof(content[1])=='object'?content[1]:_cssToJson(content[1]);
			content=opt.content[0];
		}
		var $content=opt.content?$('<div class="kui-layer-content" />').html(content).css(constyle):'';
		
		//底部导航按扭
		var foot=opt.foot||'',footstyle={};//[{text:'导航标签',className:'样式名',icon:'图标样式'}]
		if($.isArray(foot)){
			footstyle=typeof(foot[1])=='object'?foot[1]:_cssToJson(foot[1]);
			foot=foot[0];
		}
		var $foot=opt.foot?$('<div class="kui-layer-foot"></div>').html(foot).css(footstyle):'';
		
		//组装
		var type=opt.type,shade=opt.shade;
		var $shade=$('<div class="kui-layer-shade'+(opt.shadeclose?' kui-layer-close':'')+'"></div>');
			//shade为CSS对象时，遮罩样式
			if(shade && shade!=true){
				$shade.css(typeof(shade)=='object'?shade:_cssToJson(shade));
			}
		var $layer=$('<div class="kui-layer" anim="'+anim+'"></div>').addClass(opt.className||'').append($head,$content,$foot);
		var $lay=$('<div class="kui-layer-wrap"></div>').addClass('type-'+type+(opt.router?' layer-route':'')).attr({id:opt.id,type:type,'layer-index':index}).append($shade,$layer);
		$lay.appendTo('body');
		
		//属性绑定到层元素中
		$lay.option=opt;
		//显示层
		$.layer.show($lay,opt.onshow);
		
		//绑定显示方法
		$lay.__proto__.show=function(){
			$.layer.show(this,opt.onshow);
		}
		//绑定关闭方法
		$lay.__proto__.close=function(){
			//如果当前元素有路由，则返回一步
			$(this).not('.closeing').hasClass('layer-route')&&history.back();
			$.layer.close(this,opt.close);
		}
		return $lay;
	}
	/*Layer路由处理*/
	$(win).on('popstate',function(e){
		if(e.state){
			var layid=e.state.layid;
			var $next=$('#'+layid+'~[layer-index]').not('.closeing'),$layArr=$('[layer-index]');
			if(($layArr.size()&&!$layArr.last().hasClass('layer-route'))||$('.route-block').size()){
				history.forward();
			}else if(layid=='layer-base'){
				$.layer.close($('[layer-index]').not('.closeing').last());
			}else if($next.size()){
				$.layer.close($next);
			}else{
				var $lay=layRouter[layid];
				if($lay&&$('#'+layid).size()==0){
					$lay.option.isforward=true;
					$lay.show();
				}
			}
		}
	})
	/*显示窗口*******
	 *index 窗口索引，为all时关闭所有（且不触发关闭事件）
	 *call	当index=all时call可传入窗口类型。否则call传入onshow()事件
	***************/
	$.layer.show=function(index){
		if(index>=0){
			$.layer.show($('[layer-index="'+index+'"]'));
		}else if(typeof(index)=="object"){
			index.size()&&$(index).appendTo('body');//如果元素不存在，则先添加元素
			var $lay=index,$layer=$lay.children('.kui-layer'),$shade=$lay.children('.kui-layer-shade');
			var opt=$lay.option,anim=$layer.attr('anim')||'',fx=fxArr[anim]||fxArr['fade'];
			
			if($shade){
				//阻止遮罩层拖动冒泡
				$shade.on('touchmove',function(e){
					if(e && e.preventDefault){
						e.preventDefault();
					}
				})
				//遮罩层动画显示
				$shade.animate({opacity:1},'ease-out',100);
			}
			//添加出场中样式
			$lay.addClass('showing');
			//入场前CSS合并到样式设置中
			var style=$.extend(typeof(opt.style)=='object'?opt.style:_cssToJson(opt.style),fx[0]),size=opt.size;
			//设置size参数
			if(size[0])style['width']=size[0];
			if(size[1])style['height']=size[1];
			fx[1].opacity=1;
			$layer.css(style).animate(fx[1],'ease-out',fx[3],function(){
				//删除出场中样式
				$lay.removeClass('showing');
				//显示后触发onshow事件，返回当前层对象
				opt.onshow();
				//自定义事件
				var e=$.Event('show');
				//触发show事件
				$layer.trigger(e);
				
				//绑定关闭按扭
				$lay.find('.kui-layer-close').on(tap,function(){
					$lay.close()
				});
				
				//定时关闭
				if(opt.timeout){
					setTimeout(function(){
						$('#'+$lay.attr('id')).size()>0&&$lay.close()
					},(opt.timeout-1)*1000)
				}
				
			});
			//路由
			if(opt.router){
				var layid=$lay.attr('id');
				layRouter[layid]=$lay;
				!(history.state||{}).layid&&history.replaceState({layid:'layer-base'},'');
				!opt.isforward&&history.pushState({layid:layid},'');
			}
		}
	}
	/*关闭窗口*******
	 *index 窗口索引，为all时关闭所有（且不触发关闭事件）
	 *call	当index=all时call可传入窗口类型。否则call传入onclose()事件
	 *remove	关闭后，是否删除层元素，默认：true
	***************/
	$.layer.close=function(index,call,remove){
		remove=remove==undefined||true;
		if(index=='all'){
			var hlen=$('.layer-route').size();
			console.log(hlen)
			window.history.go(-hlen);
			var tp=call?'[type="'+call+'"]':'';
			$('[layer-index]'+tp).remove();
		}else if(index>=0){
			$.layer.close($('[layer-index="'+index+'"]'));
		}else if(typeof(index)=="string"&&$('#'+index).size()){
			$.layer.close($('#'+index));
		}else if(typeof(index)=="object"&&index.size()){
			var $lay=index,$layer=$lay.children('.kui-layer'),$shade=$lay.children('.kui-layer-shade');
			var anim=$layer.attr('anim')||'',fx=fxArr[anim]||fxArr['fade'];
			var onclose=call||new Function,closeanim=fx[2]||{},closeTime=fx[3]||'normal';
			
			//删除自定义动画
			anim.indexOf('user-fx')==0&&delete fxArr[anim];
			//遮罩层关闭动画
			$shade&&$shade.animate({opacity:0},'ease-out',closeTime);
			//关闭层动画（加透明度渐变）
			closeanim.opacity=0;
			$lay.addClass('closeing');//添加正在关闭样式
			$layer.animate(closeanim,'ease-out',closeTime,function(){
				//删除正在关闭样式
				$lay.removeClass('closeing');
				//删除层
				remove&&$lay.remove();
				//自定义事件
				var e=$.Event('close');
				//触发关闭方法
				onclose(e);
				//触发自定义事件
				$layer.trigger(e);
			})
		}
	}
	
	/****************************
	 * $.layer.tab Tab页
	 *tab	内容数组:[{title:'',content:''}]
	 *option.active 数字，默认显示的
	***************************/
	$.layer.tab=function(tab,option){
		tab=tab||[];
		option=$.extend({head:'',content:'',className:'',active:0},(option||{}))
		option.type='tab';
		option.className+=' kui-tab';
		option.head={title:'',btn:[{text:'关闭',className:'fr'}]};
		$.each(tab,function(i,itm){
			var cur=i==option.active?' cur':'';
			option.head.title+='<span class="kui-tab-tit'+cur+'">'+itm.title+'</span>';
			option.content+='<div class="kui-tab-content tab_'+i+''+cur+'">'+(itm.content||'')+'</div>';
		})
		//option.content='<div class="kui-tab-inner" style="width:'+tab.length+'00%;">'+option.content+'</div>';
		var tab=$.layer(option);
		tab.on('show',function(){
			$(this).find('.kui-tab-tit').on(tap,function(){
				$(this).addClass('cur').siblings().removeClass('cur');
				tab.find('.kui-tab-content').eq($(this).index()).addClass('cur').siblings().removeClass('cur');
			})
		})
	}
	
	/**********************
	 * $.layer.dialog 	提示框
	 *content	内容
	 *title		标题:string
	 *button	按扭['确定','取消']:array
	 *callback	点击按扭回调,返回按扭序列:Function
	**********************/
	$.layer.dialog=function(content,title,button,callback){
		var opt={head:'',content:'',foot:'',className:'kui-dialog',type:'dialog',shadeclose:0,router:false},callback;
		var tpi={},tpArr=['string','array','function'],tpPr=['title','button','callback'];
		
		//自动判断类型
		if(title){
			var tpr=tpPr[$.inArray($.type(title),tpArr)];
			tpi[tpr]=title;
		}
		if(button){
			var tpr=tpPr[$.inArray($.type(button),tpArr)];
			tpi[tpr]=button;
		}
		if(callback){
			var tpr=tpPr[$.inArray($.type(callback),tpArr)];
			tpi[tpr]=callback;
		}
		opt.head=tpi['title']||'';				//标题
		opt.content=content;					//内容
		callback=tpi.callback||new Function;	//回调
		button=tpi.button||['关闭'];			//按扭
		opt.foot=$.map(button,function(itm,i){return '<span btn="'+i+'">'+itm+'</span>';}).reverse().join('');
		
		//窗口页
		var dialog=$.layer(opt);
		//绑定按扭点击事件
		dialog.find('.kui-layer-foot>[btn]').on(tap,function(){
			var btni=$(this).attr('btn');
			callback(btni);
			$.layer.close(dialog);
			//自定义返回事件
			var e=$.Event('callback');
			dialog.trigger(e);
		})
		return dialog;
	}
	/********************************
	 * $.layer.actions([btn],option)	操作表
	 *操作表可以让用户从多个可选的操作中选择一个
	 *button 	一维数组数据，数据格式如：[{text:'按扭名',label:true,className:'按扭样式名',onClick:function},{text:'按扭名',label:{href:'',target:'',style:''},onClick:function}]
	 {}为分组符
	 *option	继承layer参数
	 *
	*******************************/
	$.layer.actions=function(button,option){
		button=button||[{text:'关闭',label:1}]
		var sheet='';
		$.each(button,function(i,itm){
			if(itm.text){
				var label=itm.label?' actions-label':'',
				className=itm.className?' '+itm.className:'',
				attr=typeof(itm.label)=='object'?' '+$.map(itm.label,function(v,k){return k+'='+v}).join(' '):'';
				sheet+='<a'+attr+' class="kui-actions-item'+label+className+'" label="'+i+'">'+itm.text+'</a>'
			}else{
				sheet+='</div><div class="kui-actions-group">'
			}
		})
		//结构层参数
		option=$.extend({content:'',className:'',anim:'bottom'},option||{});
		option.content='<div class="kui-actions-group">'+sheet+'</div>';
		option.className+=' kui-actions';
		var actions=$.layer(option);
		actions.find('.actions-label').on(tap,function(){
			var ti=$(this).attr('label');
			var callback=button[ti].onClick||new Function;
			callback()
			$.layer.close(actions);
		})
	}
	/**************************
	 * $.layer.toast
	**************************/
	$.layer.toast=function(option,icon){
		option=typeof(option)=='object'?option:{content:option};
		option.content+=icon?'<i class="toast-icon '+icon+'"></i>':'';
		option=$.extend({className:'kui-toast',anim:'fade'},option);
		option.className='kui-toast '+(option.className||'')
		option.router=false
		return $.layer(option);
	}
	/**************************
	 * $.layer.loading 加载
	 *msg		加载展示的文字
	**************************/
	$.layer.loading=function(msg){
		var con='<i class="load-icon"></i>'+(msg?'<div class="kui-toast-txt">'+msg+'</div>':'');
		return $.layer.toast({content:con,style:{width:'7rem',height:'7rem'}});
	}
	
	/************************
	 *自动载入CSS，如需手动载入
	 *在引用layer.js时，加入属性：merge=1
	************************/
	'function' == typeof define ? define(function() {
	  return $.layer;
	}):function(){
	  var js = document.scripts, script = js[js.length - 1], jsPath = script.src;
	  var path = jsPath.substring(0, jsPath.lastIndexOf("/") + 1);
	  
	  //如果合并方式，则需要单独引入layer.css
	  if(script.getAttribute('merge')) return; 
	  
	  document.head.appendChild(function(){
		var link = document.createElement('link');
		link.href = path + 'layer.css?'+version;
		link.type = 'text/css';
		link.rel = 'styleSheet';
		link.id = 'layermcss';
		return link;
	  }());
	  
	}();
}(window,Zepto))